<script setup>
import {ref} from "vue";
import { ElMessage } from 'element-plus'
const a=ref(null)

let one = ref(1)
let two = ref(2)
let three = ref(3)
let four = ref(4)

let val=ref('')
let res=ref('')


function finish() {
  if (val.value===''){
    ElMessage.error('你的答案不能为空')
  }
  let res=eval(`${val.value}`)
  if (res===24){
    ElMessage.success('恭喜你，你答对了')
  }
}

</script>

<template>
  <div>
    <div class="content">
      <div class="title">24点游戏</div>
      <div class="content-text">
        24点游戏是由美国麻省理工学院的阿隆·阿伦·斯卡夫（Alon Alon Sacks）于1934年提出，是数学游戏。
        24点游戏是由阿隆·阿伦·斯卡夫于1934年提出，是数学游戏。24点游戏是由阿隆·阿伦·斯卡夫于1934年提出，是数学游戏。24点游戏是由阿隆·阿伦·斯卡夫于1934年提出，是
        一款益智游戏。
      </div>
      <div class="shiLi">
        <button class="one" @click="ones">{{ one }}</button>
        <div class="two" @click="twos">{{ two }}</div>
        <div class="three" @click="threes">{{ three }}</div>
        <div class="four" @click="fours">{{ four }}</div>
      </div>
      <div class="tip">
        下面是一个24点游戏，请用四则运算把4个数字变成24点，记住，每一个数字都必须要使用，入门教程你有5分钟的思考时间
      </div>

        <el-input class="inp" v-model="val"></el-input>
        <!--结果: <span class="res">{{res}}</span>-->
        <el-button class="finish" @click="finish">完成</el-button>
    </div>
  </div>
</template>

<style scoped>
.res{
  display: inline-block;
  border: 1px solid #abcdef;
  width: 100px;
  height: 50px;
}

.inp{
  margin-left: 120px;
  width: 1000px;
  height: 50px;
}

.one,
.two,
.three,
.four {
  width: 100px;
  height: 100px;
  border: 2px solid #dce5e8;
  text-align: center;
  line-height: 100px;
  color: #dce5e8;
  border-radius: 20%;
  font-size: 20px;
  transition: all 0.5s;
}

.one:hover,
.two:hover,
.three:hover,
.four:hover{
  background-color: #dce5e8;
  color: #fff;
  transform: scale(1.2);
}

/*.one:active,
.two:active,
.three:active,
.four:active{
  background-color: #dce5e8;
  color: #fff;
}*/

.shiLi {
  margin-top: 50px;
  display: flex;
  justify-content: space-around;
}

.tip {
  margin-top: 50px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  color: #dce5e8;
}

.title {
  margin-top: 20px;
  height: 50px;
  font-size: 30px;
  text-align: center;
  color: #dce5e8;
  font-family: "Britannic Bold";
}

.finish {

  margin-top: 50px;
  margin-left: 1400px;
  width: 150px;
  height: 80px;
  border-radius: 40px
}

.content-text {
  margin-top: 20px;
  height: 50px;
  font-size: 20px;
  text-align: center;
  color: #dfe6ed;
  margin: 0 200px;
}
</style>